<!-- 边框 -->
<template>
    <layout-pane label="边框">
        <div class="row-item">
            <si-select
                v-model="currentBorderStyle"
                :list="borderStyles"
                label="样式"
                style="width: 120px"
                class="col-item"
            />
            <si-input-number
                v-model="currentBorderWidth"
                label="粗细"
                class="col-item"
            />
        </div>
        
        <div class="row-item">
            <si-color-picker
                v-model="currentBorderColor"
                label="颜色"
                show-alpha
                class="col-item"
            />
        </div>
    </layout-pane>
</template>

<script>
import { defineComponent, toRefs, computed } from 'vue'
import LayoutPane from '../../layout-pane'
import SiColorPicker from '../si-color-picker'
import SiInputNumber from '../si-input-number'
import SiSelect from '../si-select'
export default defineComponent({
    name: 'SiBorder',
    components: {
        LayoutPane,
        SiColorPicker,
        SiInputNumber,
        SiSelect
    },
    props: {
        borderStyle: {
            type: String
        },
        borderWidth: {
            type: Number
        },
        borderColor: {
            type: String
        }
    },
    emits: [
        'update:borderStyle',
        'update:borderWidth',
        'update:borderColor'
    ],
    setup(props, { emit }) {
        const { borderStyle, borderWidth, borderColor } = toRefs(props)

        // 边框样式列表
        const borderStyles = computed(() => {
            return [
                { label: '无', value: 'none' },
                { label: '实线', value: 'solid' },
                { label: '点线', value: 'dotted' },
                { label: '虚线', value: 'dashed' }
            ]
        })

        const currentBorderStyle = computed({
            get: () => borderStyle.value,
            set: val => emit('update:borderStyle', val)
        })
        const currentBorderWidth = computed({
            get: () => borderWidth.value,
            set: val => emit('update:borderWidth', val)
        })
        const currentBorderColor = computed({
            get: () => borderColor.value,
            set: val => emit('update:borderColor', val)
        })

        return {
            borderStyles,
            currentBorderStyle,
            currentBorderWidth,
            currentBorderColor
        }
    }
})
</script>

<style lang="less" scoped>
.row-item {
    display: flex;
    align-items: center;
    & + .row-item {
        margin-top: 10px;
    }
    .col-item {
        & + .col-item {
            margin-left: 12px;
        }
    }
}
</style>